<template>
  <div id="left2" class="left1"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 空气质量等级0-50为优#00e400，51-100为良#FFFF00，101-150为轻度污染#ff7e00，151-200为中度污染#FF0000，201-300为重度污染#99004c，301-500是严重污染#7e0023；
    draw() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("left2"));
      // 绘制图表
      var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
      var help = [];
      var positive = [];
      var negative = [];
      for (var i = 0, sum = 0; i < data.length; ++i) {
        if (data[i] >= 0) {
          positive.push(data[i]);
          negative.push("-");
        } else {
          positive.push("-");
          negative.push(-data[i]);
        }

        if (i === 0) {
          help.push(0);
        } else {
          sum += data[i - 1];
          if (data[i] < 0) {
            help.push(sum + data[i]);
          } else {
            help.push(sum);
          }
        }
      }
      myChart.setOption({
        // title: {
        //   text: "Waterfall",
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          data: (function () {
            var list = [];
            for (var i = 1; i <= 11; i++) {
              list.push("Oct/" + i);
            }
            return list;
          })(),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            stack: "all",
            itemStyle: {
              normal: {
                barBorderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
              emphasis: {
                barBorderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
            },
            data: help,
          },
          {
            name: "positive",
            type: "bar",
            stack: "all",
            data: positive,
          },
          {
            name: "negative",
            type: "bar",
            stack: "all",
            data: negative,
            itemStyle: {
              color: "#f33",
            },
          },
        ],
      });
    },
  },
  // 以下是生命周期钩子
  mounted() {
    this.draw();
  },
};
</script>
<style lang='less' scoped>
.left1 {
  width: 100%;
  height: 100%;
}
</style>
